<template>
<div class="block">
    <ul>
        <li>
            <router-link to="/purchase/order">
                <div class="iconBg">
                    <i class="el-icon-shopping-cart-full"></i>
                </div>
                <h2>采购商品</h2>
            </router-link>
        </li>
        <li>
            <router-link to="/purchase/inspect">
                <div class="iconBg">
                    <i class="el-icon-receiving"></i>
                </div>
                <h2>验收入库</h2>
            </router-link>
        </li>
        <li>
            <router-link to="/database/drug">
                <div class="iconBg">
                    <i class="el-icon-first-aid-kit"></i>
                </div>
                <h2>药品管理</h2>
            </router-link>
        </li>
        <li>
            <router-link to="/store/query">
                <div class="iconBg">
                    <i class="el-icon-search"></i>
                </div>
                <h2>库存查询</h2>
            </router-link>
        </li>
        <li>
            <router-link to="/store/takestock">
                <div class="iconBg">
                    <i class="el-icon-s-shop"></i>
                </div>
                <h2>库存盘点</h2>
            </router-link>
        </li>
        <li>
            <router-link to="/store/humiture">
                <div class="iconBg">
                    <i class="el-icon-odometer"></i>
                </div>
                <h2>温湿库监控</h2>
            </router-link>
        </li>
    </ul>
</div>
</template>

<script>
import baseView from "@/views/base";
import {utils} from "hi-ui";

export default {
    name: "menuList",
    extends: baseView,
    components: {},
    data() {
        return {
            
        };
    },
    computed: {},
    watch: {},
    methods: {
        
    },
    mounted() {},
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block{
    height:100%;
    *{
        margin:0;
        padding:0;
    }
    ul{
        $liNum:6;
        display: flex;
        align-items: center;
        justify-content: space-around;
        list-style: none;
        height:100%;
        li{
            flex:1;
            text-align: center;
            &>a{
                display: inline-block;
                border-radius: 10px;
                padding: 10px 20px;
                transition: all 0.3s;
                &:hover{
                    background-color: #eee;
                }
            }
            .iconBg{
                $iconH:42px;
                height:$iconH;
                line-height:$iconH;
                width:$iconH;
                border-radius: 50%;
                background-image: linear-gradient(#FFC42E, #FAA15B);
                margin:auto;
                i{
                    line-height: $iconH;
                    font-size: 28px;
                    color:#fff;
                }
            }
            h2{
                height:32px;
                line-height:32px;
                font-size: 14px;
            }
        }
        @while $liNum>0{
            li:nth-child(#{$liNum}) .iconBg{
                filter:hue-rotate(random(360)*1deg); 
            }
            $liNum:$liNum - 1;
        }
    }
}
</style>
